<template>
  <view>
    <l-info-list-cell label="昵称" arrow :value="userInfo ? userInfo.nickname : ''" @click="showModal=true" />
    <l-info-list-cell label="手机号" :unlined="unlined" :arrow="userInfo && !userInfo.phone" :value="userInfo ? userInfo.phone : '去绑定'" @click="changePhone" />

    <tui-modal :show.sync="showModal" @click="modalClick">
      <view class="input-box">
        <input v-model="name" placeholder="请输入昵称" type="text">
      </view>
    </tui-modal>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'UserInfoOther',
  data() {
    return {
      showModal: false,
      name: ''
    }
  },
  computed: {
    unlined() {
      return this.identityList.length < 2
    },
    ...mapGetters({
      userInfo: 'userInfo',
      userId: 'userId',
      identityList: 'identityList'
    })
  },
  methods: {
    // 修改手机号
    changePhone() {
      if (this.userInfo && this.userInfo.phone) return
      this.jump('')
    },
    // 修改姓名
    modalClick(e) {
      if (e.index) {
        if (!this.name) {
          this.toast('请输入昵称')
          return
        }
        this.$emit('update', {
          userId: this.userId,
          nickname: this.name
        })
      }
      this.name = ''
      this.showModal = false
    }
  }
}
</script>

<style scoped>

</style>
